<template>
  <div class="dashboard">
    <!--    <div class="dashboard-icon">-->
    <!--      <div class="glue-item">-->
    <!--        <strong>A</strong>-->
    <!--        <svg-icon :icon-class="IconBlue" :size="IconSize"/>-->
    <!--        <ok-ng :status="statusA"></ok-ng>-->
    <!--        <label>{{ MessageA }}</label>-->
    <!--      </div>-->
    <!--      <div class="glue-item">-->
    <!--        <strong>B</strong>-->
    <!--        <svg-icon :icon-class="IconYellow" :size="IconSize"/>-->
    <!--        <ok-ng :status="statusB"></ok-ng>-->
    <!--        <label>{{ MessageB }}</label>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="dashboard-option">-->
    <!--      <template v-if="IsAuthentication&&UserInfo.role == '5'">-->
    <!--        <router-link-->
    <!--          class="dashboard-edit-flow"-->
    <!--          to="flow"-->
    <!--        > 编辑流程-->
    <!--        </router-link>-->
    <!--        <el-button-->
    <!--          type="text"-->
    <!--          size="mini"-->
    <!--          icon="el-icon-edit"-->
    <!--          @click="SelectDataManage"-->
    <!--        >查看配方-->
    <!--        </el-button>-->
    <!--      </template>-->
    <!--      <el-button-->
    <!--        type="text"-->
    <!--        size="mini"-->
    <!--        icon="el-icon-video-play"-->
    <!--        @click="Run(0)"-->
    <!--      >单次执行A-->
    <!--      </el-button>-->
    <!--      <el-button-->
    <!--        type="text"-->
    <!--        size="mini"-->
    <!--        icon="el-icon-video-play"-->
    <!--        @click="Run(1)"-->
    <!--      >单次执行B-->
    <!--      </el-button>-->
    <!--      <el-button-->
    <!--        type="text"-->
    <!--        size="mini"-->
    <!--        icon="el-icon-video-pause"-->
    <!--        @click="Stop"-->
    <!--      >停止-->
    <!--      </el-button>-->
    <!--      <el-button-->
    <!--        type="text"-->
    <!--        size="mini"-->
    <!--        icon="el-icon-user"-->
    <!--        @click="Login()"-->
    <!--      >-->
    <!--        {{ IsAuthentication ? UserInfo.name + '：点击退出' : '登录' }}-->
    <!--      </el-button>-->
    <!--      &lt;!&ndash;      <logger></logger>&ndash;&gt;-->
    <!--    </div>-->
    <Preview v-if="isShowPreview" :dev="false" @close="handlePreviewChange"/>
  </div>
</template>
<script>
import Logger from '../Designer/custom-component/Logger/Component.vue'
import EventBus from '../../../libs/EventBus'
import { AppParams } from '@/utils/appParams'
// import DataManage from '../../dataManage/Index.vue'
import OkNg from '../../../components/OK_NG/Index.vue'
import Utils from '@/utils/Common'
import Preview from '@/views/UserPage/Designer/components/Editor/Preview.vue'
import UserPageApi from '@/api/UserComponentsApi'
import { setDefaultcomponentData } from '@/store/modules/designer/snapshot'
import Index from '@/layout/components/Sidebar/index.vue'
import { Emitter } from "@/utils/Emitter";

export default {
  name: 'Glue',
  components: {
    Index,
    Preview,
    Logger: Logger,
    OkNg
  },
  data() {
    return {
      isShowPreview: true,
      IconBlue: 'glue_blue',
      IconYellow: 'glue_yellow',
      IconNG: 'NG',
      IconOK: 'OK',
      IconSize: '30vmin',
      IconStatusSize: '1000%',
      componentName: null,
      ShowComponentName: false,
      ShowUserLoginDialog: false,
      statusA: 1,
      statusB: 1,
      DataNodeIdA1: 16,
      DataNodeIdA2: 24,
      DataNodeIdA3: 182,
      DataNodeIdB1: 5,
      DataNodeIdB2: 218,
      MessageA: null,
      MessageB: null,
      UserInfo: {},
      IsAuthentication: false
    }
  },
  methods: {
    restore() {
      // 用保存的数据恢复画布
      const upa = new UserPageApi()
      upa.GetUserPageComponents('default.Component', res => {
        if (!Utils.IsEmpty(res)) {
          setDefaultcomponentData(res)
          this.$store.commit('Config/setComponentData', res)
        }
      })
      upa.GetUserPageComponents('default.Style', res => {
        if (!Utils.IsEmpty(res)) {
          this.$store.commit('Config/setCanvasStyle', res)
        }
      })
      // if (new UserPageApi().GetUserPageComponents()) {
      //   setDefaultcomponentData(JSON.parse(localStorage.getItem('canvasData')))
      //   this.$store.commit('Config/setComponentData', JSON.parse(localStorage.getItem('canvasData')))
      // }

      // if (localStorage.getItem('canvasStyle')) {
      //   this.$store.commit('Config/setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
      // }
    },
    handlePreviewChange() {
      this.isShowPreview = false
      this.$store.commit('Config/setEditMode', 'edit')
    },
    CloseDialog(res) {
      this.ShowUserLoginDialog = false
      if (res === 'success') {
        this.InitLogin()
      }
    },
    Login() {
      EventBus.$emit(AppParams.JAVA_SCRIPT_EVENT.USER_LOGIN)
      // if (this.IsAuthentication) {
      //   this.ShowUserLoginDialog = false
      //   Utils.Logout()
      //   this.InitLogin()
      // } else {
      //   this.ShowUserLoginDialog = true
      // }
    },
    Run(Index) {
      const allFlows = this.$store.getters.allFlow
      // EventBus.$emit(AppParams.JAVA_SCRIPT_EVENT.ONCE_RUN, allFlows[Index])
    },
    Stop() {
      const allFlows = this.$store.getters.allFlow
      for (const allFlow of allFlows) {
        EventBus.$emit(AppParams.JAVA_SCRIPT_EVENT.STOP_PROCESSOR, allFlow)
      }
      Utils.MessageSuccess('已停止当前流程')
    },
    SelectDataManage() {
      const DATA_MANAGE = AppParams.JAVA_SCRIPT_EVENT.DATA_MANAGE
      EventBus.$emit(DATA_MANAGE, { name: DATA_MANAGE })
      this.ShowComponentName = true
      this.componentName = DATA_MANAGE
    },
    LoginSuccess(user) {
      this.IsAuthentication = Utils.IsAuthentication()
      if (this.IsAuthentication) {
        Utils.Logout(AppParams.COMMON.LOGOUT_TIME)
        this.InitLogin()
      }
    },
    InitLogin() {
      const a = Utils.IsAuthentication()
      this.IsAuthentication = a
      this.UserInfo = Utils.GetLoginUserInfo()
      Emitter.on(AppParams.JAVA_SCRIPT_EVENT.USER_LOGIN_COMPLETED, this.LoginSuccess)
    }
  },
  created() {
    this.restore()
  },
  mounted() {
    this.InitLogin()
    EventBus.$on(AppParams.JAVA_SCRIPT_EVENT.NODE_COMPLETE, (v) => {
      if (v.id === this.DataNodeIdA1) {
        this.MessageA = null
        const dfs = v.NodeOutParam.OutParams
        for (const dfsKey of dfs) {
          if (dfsKey.ParamName === 'status') {
            this.statusA = dfsKey.Value || 0
          }
          if (dfsKey.ParamName === 'cunzaiMessage') {
            this.MessageA = dfsKey.Value
          }
        }
      }
      if (v.id === this.DataNodeIdA3) {
        this.MessageA = null
        const dfs = v.NodeOutParam.OutParams
        for (const dfsKey of dfs) {
          if (dfsKey.ParamName === 'CHECK_STATUS') {
            this.statusA = dfsKey.Value || 0
          }
          if (dfsKey.ParamName === 'Out1') {
            this.MessageA = dfsKey.Value
          }
        }
      }
      if (v.id === this.DataNodeIdA1) {
        this.MessageA = null
        const dfs = v.NodeOutParam.OutParams
        for (const dfsKey of dfs) {
          if (dfsKey.ParamName === 'status') {
            this.statusA = dfsKey.Value || 0
          }
          if (dfsKey.ParamName === 'cunzaiMessage') {
            this.MessageA = dfsKey.Value
          }
        }
      }
      if (this.statusA === 0 && v.id === this.DataNodeIdA2) {
        const dfs = v.NodeOutParam.OutParams
        for (const dfsKey of dfs) {
          if (dfsKey.ParamName === 'ispn') {
            this.statusA = dfsKey.Value || 0
          }
          if (dfsKey.ParamName === 'PNMessage') {
            this.MessageA = dfsKey.Value
          }
        }
      }

      if (v.id === this.DataNodeIdB1) {
        this.MessageB = null
        const dfs = v.NodeOutParam.OutParams
        for (const dfsKey of dfs) {
          if (dfsKey.ParamName === 'status') {
            this.statusB = dfsKey.Value || 0
          }
          if (dfsKey.ParamName === 'cunzaiMessage') {
            this.MessageB = dfsKey.Value
          }
        }
      }
      if (this.statusB === 0 && v.id === this.DataNodeIdB2) {
        const dfs = v.NodeOutParam.OutParams
        for (const dfsKey of dfs) {
          if (dfsKey.ParamName === 'ispn') {
            this.statusB = dfsKey.Value || 0
          }
          if (dfsKey.ParamName === 'PNMessage') {
            this.MessageB = dfsKey.Value
          }
        }
      }
    })
  },
  beforeUnmount () {
    Emitter.off(AppParams.JAVA_SCRIPT_EVENT.USER_LOGIN_COMPLETED, this.LoginSuccess)
  }
}
</script>

<style scoped lang="less">
/* 整个大屏的容器 */
.dashboard {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom right, #0f2027, #203a43, #2c5364);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) inset;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: background-glow 5s ease - in - out infinite alternate;

  .dashboard-icon {
    min-width: 50vw;
    width: 70vw;
    display: flex;
    justify-content: center;

    .glue-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      strong {
        font-weight: bold;
        font-size: 55px;
        color: #ffffff;

        position: absolute;
        top: 0;
      }

      label {
        color: red;
      }
    }
  }

  .dashboard-option {
    flex: 1;
    height: 100vh;
    padding-top: 10px;
    max-width: 40%;
    z-index: 99;

    .dashboard-edit-flow {
      font-size: 12px;
      padding-right: 12px;
      color: #66b1ff;
    }
  }
}

/* 背景动画 */
@keyframes background-glow {
  from {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) inset;
  }

  to {
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.3) inset, 0 0 40px rgba(0, 0, 0, 0.6) inset;
  }
}
</style>
